import {View, Button, Text, Image, ScrollView, Radio} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, {Component} from 'react';
import * as T from '../types';
import './memberCard.less';
import actions from '../actions/index';
import {connect} from 'react-redux';
import {store2Props} from '../selectors';
import chijingRight from '@/assets/image/index/renewalMember/chijing-right.png';
import lanjingRight from '@/assets/image/index/renewalMember/lanjing-right.png';
import uesrImg from '@/assets/image/my/uesr_pic.png';
import twoImg from '@/assets/image/my/two.png';
import chijingCardLogo from '@/assets/image/index/renewalMember/chijing-cardLogo.png';
import lanjingCardLogo from '@/assets/image/index/renewalMember/lanjing-cardlogo.png';
interface ComponentState {
  newUserModel: boolean;
}

type ITopProps = T.IProps & T.ITopProps & ComponentState;
//@ts-ignore
@connect<Partial<ITopProps>, T.ITopState>(store2Props, actions)
export default class Info extends Component<Partial<ITopProps>, T.ITopState> {
  constructor(props: ITopProps) {
    super(props);
    this.state = {};
  }

  render() {
    let {
      actions: {action},
      main: {customer, memberInfo, memberCardType},
    } = this.props;
    return (
      <View
        className={`renewalMember-memberCard renewalMember-memberCard-${
          ['shuangchong', 'chijing'].includes(memberCardType) ? 'chijing' : 'lanjing'
        }`}
      >
        <View style={{padding: '30rpx 46rpx 0px', height: '100%'}}>
          <View style={{zIndex: 2, flexDirection: 'row', alignItems: 'center'}}>
            <Image className="memberCard-userHeader" src={customer?.pictureUrl ? customer?.pictureUrl : uesrImg} />
            <View>
              <View className="memberCard-userName">
                {customer?.name}
                <Image
                  src={
                    ['shuangchong'].includes(memberCardType)
                      ? twoImg
                      : ['chijing'].includes(memberCardType)
                      ? chijingCardLogo
                      : lanjingCardLogo
                  }
                  className="memberCard-memberlogo"
                />
              </View>
              {memberInfo?.endTime && <Text className="memberCard-endTime">{memberInfo?.endTime} 到期</Text>}
            </View>
          </View>
          <View
            className="memberCard-renewal"
            onClick={() => {
              Taro.navigateTo({
                url: '/pages/package-A/activationRecord/index',
              });
            }}
          >
            续费记录
            <Image
              src={['shuangchong', 'chijing'].includes(memberCardType) ? chijingRight : lanjingRight}
              className="memberCard-right"
            />
          </View>
        </View>
        <Image
          src={
            ['shuangchong', 'chijing'].includes(memberCardType)
              ? 'https://ruiyinmall.oss-cn-nanjing.aliyuncs.com/ruizhimini/chijingBG.png'
              : 'https://ruiyinmall.oss-cn-nanjing.aliyuncs.com/ruizhimini/lanjingBG.png'
          }
          className="memberCard-bg"
        />
      </View>
    );
  }
}
